<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="reportEventForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
          <input type="hidden" name="id" v-model="item.id"/>
          <input type="hidden" name="reportingType" v-model="item.reportingType"/>
          <div class="clearfix "></div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办对象：</label>
              <div class="col-md-12">
                <select required="" data-placeholder="选择督办对象" id="bean-supervisionTarget" name="supervisionTarget" class="form-control" aria-describedby="bean-supervisionTarget-error" aria-invalid="true">
                  <option value="">--请选择督办对象--</option>
                  <option :selected="item.supervisionTarget==0" value="0">督办到个人</option>
                  <option :selected="item.supervisionTarget==1" value="1">督办到机构</option>
                </select>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">责任人：</label>
              <div class="col-md-12">
                <select required="" data-placeholder="选择责任人" id="bean-dutyUserId" name="dutyUserId" class="form-control" aria-describedby="bean-dutyUserId-error" aria-invalid="true">
                  <option value="">--请选择责任人--</option>
                  <option :value="userItem.id" :selected="item.dutyUserId == userItem.id" v-for="userItem in userItems">{{userItem.name}}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">责任单位：</label>
              <div class="col-md-12">
                <select required="" data-placeholder="选择责任单位" id="bean-dutyOrgId" name="dutyOrgId" class="form-control" aria-describedby="bean-dutyOrgId-error" aria-invalid="true">
                  <option value="">--请选择责任单位--</option>
                  <option :value="orgItem.id" :selected="item.dutyOrgId == orgItem.id" v-for="orgItem in orgItems">{{orgItem.name}}</option>
                </select>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办类型：</label>
              <div class="col-md-12">
                <select required="" data-placeholder="选择督办类型" id="bean-supervisionType" name="supervisionType" class="form-control" aria-describedby="bean-supervisionType-error" aria-invalid="true">
                  <option value="">--请选择督办类型--</option>
                  <option :selected="item.supervisionType==0" value="0">巡河事件</option>
                  <option :selected="item.supervisionType==1" value="1">公众投诉</option>
                  <option :selected="item.supervisionType==2" value="2">重点项目</option>
                  <option :selected="item.supervisionType==3" value="3">常规任务</option>
                  <option :selected="item.supervisionType==4" value="4">紧急任务</option>
                </select>
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办标题：</label>
              <div class="col-md-12">
                <div class="form-control">
                  <input required="" type="radio" :checked="item.supervisionTitle=='投诉问题处理'" value="投诉问题处理" id="supervisionTitle-1" name="supervisionTitle" aria-describedby="supervisionTitle-error"> <label for="supervisionTitle-1"> 投诉问题处理 </label>
                  <input required="" type="radio" :checked="item.supervisionTitle=='巡查工作开展'" value="巡查工作开展" id="supervisionTitle-2" name="supervisionTitle" aria-describedby="supervisionTitle-error"> <label for="supervisionTitle-2"> 巡查工作开展 </label>
                  <input required="" type="radio" :checked="item.supervisionTitle=='重点项目推进'" value="重点项目推进" id="supervisionTitle-3" name="supervisionTitle" aria-describedby="supervisionTitle-error"> <label for="supervisionTitle-3"> 重点项目推进 </label>
                  <input required="" type="radio" :checked="item.supervisionTitle=='综合工作考核'" value="综合工作考核" id="supervisionTitle-4" name="supervisionTitle" aria-describedby="supervisionTitle-error"> <label for="supervisionTitle-4"> 综合工作考核 </label>
                  <label id="supervisionTitle-error" class="error" for="supervisionTitle"></label>
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办内容：</label>
              <div class="col-md-12">
                <input required="" id="bean-supervisionContent" name="supervisionContent" v-model="item.supervisionContent" class="form-control" type="text" placeholder="请输入督办内容" aria-describedby="bean-supervisionContent-error" maxlength="255" aria-invalid="true">
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办要求：</label>
              <div class="col-md-12">
                <textarea required="" id="bean-supervisionDemand" name="supervisionDemand" class="form-control" placeholder="请输入督办要求" aria-describedby="bean-supervisionDemand-error" maxlength="1255" aria-invalid="true">{{item.supervisionDemand}}</textarea>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办时间：</label>
              <div class="col-md-12">
                <input required="" autocomplete="off" id="bean-supervisionDate" name="supervisionDate" v-model="item.supervisionDate" class="laydate-icon form-control layer-date" type="text" placeholder="请输入督办发起时间" aria-describedby="bean-supervisionDate-error" aria-invalid="true">
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">督办联系人：</label>
              <div class="col-md-12">
                <input id="bean-supervisionContactName" name="supervisionContactName" v-model="item.supervisionContactName" class="form-control" type="text" placeholder="请输入督办联系人" aria-describedby="bean-supervisionContactName-error" maxlength="55" aria-invalid="true">
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">完成期限：</label>
              <div class="col-md-12">
                <input required="" autocomplete="off" id="bean-dateDeadline" name="dateDeadline" v-model="item.dateDeadline" class="laydate-icon form-control layer-date" type="text" placeholder="请输入督办完成期限" aria-describedby="bean-dateDeadline-error" aria-invalid="true">
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">联系人电话：</label>
              <div class="col-md-12">
                <input id="bean-supervisionContactCellphone" name="supervisionContactCellphone" v-model="item.supervisionContactCellphone" class="form-control" type="text" placeholder="请输入督办联系人电话" aria-describedby="bean-supervisionContactCellphone-error" maxlength="55" aria-invalid="true">
              </div>
            </div>
          </div>

          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/>
              |
              <input class="btn btn-default" type="button" value="返回" @click="lbox.closeMyBoxLayer()"/>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

  export default {
    data() {
      return {
        item: {},
        orgItems: [],
        userItems: [],
        reportingType: 0
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      that.reportingType = apiUtil.getQueryString('reportingType');
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#reportEventForm').validate();
      that.staff.init(function () {
        if (apiUtil.existSessionKey(site.reportEvent.info)) {
          that.info();
        }
      });

      laydate.render({
        elem: '#bean-dateDeadline',
        event: 'click',
        done: function (val) {
          that.item.dateDeadline = val;
        }
      });

      laydate.render({
        elem: '#bean-supervisionDate',
        event: 'click',
        done: function (val) {
          that.item.supervisionDate = val;
        }
      });
      that.getOrglist();
      that.getUserList();
    },
    methods: {
      info() {
        let that = this;
        axios.get(site.reportEvent.info + sessionStorage.getItem(site.reportEvent.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      // changeTreatmentUserJob(ele) {
      //   let that = this;
      //   that.item.treatmentUserJob = $(ele.target).find('option:selected').val();
      //   that._xTreatmentUserJob(that.item.treatmentUserJob);
      // },
      // _xTreatmentUserJob(type) {
      //   if (type === '3') {
      //     this.isTreatmentArea = false;
      //     this.isTreatmentOrg = true;
      //     this.getOrglist();
      //   } else {
      //     this.isTreatmentArea = true;
      //     this.isTreatmentOrg = false;
      //     this.getArealist();
      //   }
      //   this.userItems = [];
      // },
      // getArealist() {
      //   let that = this;
      //   axios.post(site.area.list, {}).then(function (response) {
      //     const result = response.data;
      //     if (result.code === 0) {
      //       that.areaItems = result.data;
      //     } else {
      //       alert(result.message);
      //     }
      //   });
      // },
      getOrglist() {
        let that = this;
        axios.post(site.orgInfo.list, {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.orgItems = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      getUserList() {
        let that = this;
        let dataForm = {orgId: $('#bean-treatmentOrgId').find('option:selected').val()};
        console.info(dataForm)
        axios.post(site.riverStaff.list, dataForm).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.userItems = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#reportEventForm').valid()) {
          axios.post(site.reportEvent.supervision, $('#reportEventForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('督导成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>

